<template>
    <yh-dialog :title="title" width="800px" :visible.sync="visibleTemp" :close-on-click-modal="false" drag>
        <div class="dialog-main-body" v-loading="loading">
            <el-tabs type="card" v-model="activePane">
                <el-tab-pane label="汇总屏" name="MONITOR_COUNT">
                    <RiskMonitorTableLayoutBox
                        ref='total'
                        style="height: 300px;"
                        :key='"total"'
                        :noneSelected='fieldData.MONITOR_COUNT.noneSelected'
                        :fixedFieldList='fieldData.MONITOR_COUNT.fixedFieldList'
                        :selected='fieldData.MONITOR_COUNT.selected'
                    />
                </el-tab-pane>
                <el-tab-pane label="明细屏" name="MONITOR_DETAIL">
                    <RiskMonitorTableLayoutBox
                        ref='detal'
                        style="height: 300px;"
                        :key='"detal"'
                        :noneSelected='fieldData.MONITOR_DETAIL.noneSelected'
                        :fixedFieldList='fieldData.MONITOR_DETAIL.fixedFieldList'
                        :selected='fieldData.MONITOR_DETAIL.selected'
                    />
                </el-tab-pane>
            </el-tabs>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button size="mini" @click="reset">重置</el-button>
            <el-button size="mini" @click="visibleTemp = false">取 消</el-button>
            <el-button size="mini" type="primary" @click="onSubmit" v-loading="loading">确 定</el-button>
        </div>
    </yh-dialog>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch, Emit } from 'vue-property-decorator';
import draggable from 'vuedraggable';
import RiskMonitorTableLayoutBox from './risk-monitor-table-layout-box';
import { updateTableLayout } from '@/common/api/commonApi';
type LayoutField = { columns: any[] ; selectedColumns: string[] };

@Component({ name: 'RiskMonitorTableLayout', components: { draggable, RiskMonitorTableLayoutBox } })
export default class RiskMonitorTableLayout extends Vue {
    // 标题
    @Prop({ default: '页面布局' }) readonly title: string;
    // 显隐
    @Prop({ default: false }) readonly visible!: boolean;

    // 字段列表
    @Prop({ default: () => {} }) readonly detailField!: LayoutField;
    // 已选择字段列表
    @Prop({ default: () => {} }) readonly totalField!: LayoutField;

    private fieldData : any = {
        'MONITOR_COUNT': {
            selected: [],
            fixedFieldList: [],
            noneSelected: [],
        },
        'MONITOR_DETAIL': {
            selected: [],
            fixedFieldList: [],
            noneSelected: [],
        },
    }
    // 组件内部使用
    private visibleTemp: boolean = false;
    private loading: boolean = false;
    private activePane: string = 'MONITOR_COUNT';

    @Watch('visible', { deep: true })
    onWatchVisible(value: boolean) {
        this.visibleTemp = value;
    }

    @Watch('visibleTemp', { deep: true })
    onWatchVisibleTemp(value: boolean) {
        if (value !== this.visible) {
            this.$emit('update:visible', value);
        }
    }

    @Watch('detailField', { deep: true })
    onWatchDetailField() {
        // 处理汇总的
        let fieldList = JSON.parse(JSON.stringify(this.detailField.columns));

        let selectedFieldList = [];
        this.detailField.selectedColumns.forEach(col => {
            const val = this.detailField.columns.find(item => {
                return item.val === col;
            });
            if (val) {
                selectedFieldList.push(val);
            }
        });
        let fixedFieldList = JSON.parse(JSON.stringify(this.detailField.columns.filter((item) => { return item.fixedable })));
        this.filterList('MONITOR_DETAIL', fieldList, selectedFieldList, fixedFieldList);
    }

    @Watch('totalField', { deep: true })
    onWatchTotalField() {
        // 处理汇总的
        let fieldList = JSON.parse(JSON.stringify(this.totalField.columns));
        let selectedFieldList = [];
        this.totalField.selectedColumns.forEach(col => {
            const val = this.totalField.columns.find(item => {
                return item.val === col;
            });
            if (val) {
                selectedFieldList.push(val);
            }
        });
        let fixedFieldList = JSON.parse(JSON.stringify(this.totalField.columns.filter((item) => { return item.fixedable })));
        this.filterList('MONITOR_COUNT', fieldList, selectedFieldList, fixedFieldList);
    }

    /**
     * 过滤数据
     * @param allList 表格全部字段
     * @param selectedList 表格已选择字段
     * @param fixedList 表格固定字段
     */
    filterList(key, allList, selectedList, fixedList) {
        // 4. 获取未选择的列表
        const noneSelected = allList.filter(item => {
            if (item.fixedable) return false;
            const value = selectedList.find(selectedItem => {
                return item.val === selectedItem.val;
            });
            return !value;
        });
        this.fieldData[key].fixedFieldList = fixedList;
        this.fieldData[key].selected = selectedList;
        this.fieldData[key].noneSelected = noneSelected;
    }

    // 重置
    reset() {
        let fieldList = this.activePane === 'MONITOR_COUNT' ? this.totalField.columns : this.detailField.columns;

        // 1. 获取固定 keys
        const fixedKeys = fieldList.filter(item => item.fixedable).map(item => item.val);

        // 2. 剔除固定值，获取全部列表
        this.fieldData[this.activePane].selected = fieldList.filter(item => {
            return !fixedKeys.includes(item.val);
        });
        // this.selected = JSON.parse(JSON.stringify([...this.selected, ...this.noneSelected]));

        this.fieldData[this.activePane].noneSelected = [];
    }
    // @Emit()
    async onSubmit() {
        // console.log('触发提交事件');
        await this.$refs.total.onSubmit('MONITOR_COUNT');
        await this.$refs.detal.onSubmit('MONITOR_DETAIL');
        this.yh_message_success('修改成功');
        this.visibleTemp = false;
        this.$emit('on-submit');
    }
    // 开始拖拽事件
    onStart() {
        // this.drag = true;
    }
    // 拖拽结束事件
    onEnd() {
        // this.drag = false;
    }
}
</script>

<style lang="scss" scoped>
.dialog-main-body {
    height: 345px;
}

/deep/ .el-dialog .el-dialog__body {
    max-height: none;
}
</style>
